<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
        border:1px solid red;
        height:200px;
        width:200px;
        padding-top:20px;
        padding-left:20px;
        padding-right:20px;
        padding-bottom:20px;
        /* padding:20px;(同时设置元素所有四个方向（上、右、下、左）的内边距（padding）为20像素（px）)*/
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color:gold;">我嘞个豆</div>
<!-- padding内边距属性定义了元素内容框与其边框之间的空间大小(不影响行高计算但是影响布局，它会增加元素的大小)-->
<!--一个值：padding: 20px; 所有四个方向的内边距都设置为20像素。(属性值的写法与外边距相同)-->
<!--两个值：padding: 20px 10px; 第一个值（20px）设置上和下内边距，第二个值（10px）设置左和右内边距。-->
<!--三个值：padding: 20px 10px 5px; 第一个值（20px）设置上内边距，第二个值（10px）设置右和左内边距，第三个值（5px）设置下内边距。-->
<!--四个值：padding: 20px 10px 5px 30px; 按照顺时针方向，分别设置上（20px）、右（10px）、下（5px）、左（30px）内边距。-->
<!--可以设置单方向内边距，padding-方位名词-->
        <div>
            小朋友
        </div>
    </div>
</body>
</html>